/**重写新定义样式和第三方插件样式*/
// select2样式修改
.select2-container--bootstrap {

    &.select2-container--focus,
    &.select2-container--open {
        .select2-selection {
            border-color: $select2-border-color
        }
    }

    .select2-dropdown {
        border-color: $select2-border-color
    }

    .select2-results__option--highlighted[aria-selected] {
        background-color: $select2-selected-bg;
    }

    .select2-selection {
        border-radius: 4px;
        line-height: 1.7;
    }

    .select2-selection--multiple .select2-selection__choice {
        background-color: $select2-selected-bg;
        border-color: $select2-border-color;
    }

    .select2-results__option[aria-disabled=true] {
        color: $select2-result-color;
    }
}

.search-panel {
    width: 100%;
    background: $search-panel-bg;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 15px 15px;
    box-shadow: $search-panel-shadow;
}

.select-list {
    overflow: hidden;

    ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            color: $search-panel-list-item-color;
            margin: 5px 15px 5px 0px;
            height: 34px;
            display: flex;
            flex-direction: row;
            align-items: center;
            flex-wrap: nowrap;

            @media (min-width: 768px) {
                float: left;
            }

            input {
                border: 1px solid $search-panel-list-item-border;
                border-radius: 4px;
                background: transparent;
                outline: none;
                height: 34px;
                font-size: 12px;
                width: 200px;
                padding-left: 5px;

                &:focus {
                    border: 1px solid $search-panel-list-item-focus-border;
                }
            }

            select {
                border: 1px solid $search-panel-list-item-border;
                border-radius: 4px;
                background: transparent;
                outline: none;
                height: 34px;
                width: 200px;
                padding-left: 5px;

                &:focus {
                    border: 1px solid $search-panel-list-item-focus-border;
                }
            }

            .select2-container {
                display: inline-block;
                width: 200px !important;
            }

            .btn {
                margin-right: 4px;
            }
        }

    }
}

input[type=checkbox] {
    position: relative;
    margin: 3px 4px 0 0;
    width: 15px;
    height: 15px;
    outline: none;
    cursor: pointer;
    vertical-align: -3px;
    border: 1px solid $checkbox-border;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 2px;

    &:checked {
        background-color: #fff;
        border: 1px solid $checkbox-border;

        &:before {
            top: 3px;
            left: 3px;
            width: 8px;
            height: 5px;
            content: '';
            color: $checkbox-checked-border;
            position: absolute;
            border-bottom: solid 2px currentColor;
            border-left: solid 2px currentColor;
            -webkit-transform: rotate(-48deg);
            transform: rotate(-48deg);
        }
    }

    &:disabled {
        cursor: not-allowed;
        border-color: #ccc;
        background-color: #f7f7f7;

        &:checked {
            border-color: #eeeeee;
            background-color: #eeeeee;
        }
    }
}

input[type=radio] {
    position: relative;
    margin: 3px 4px 0 0;
    width: 15px;
    height: 15px;
    outline: none;
    cursor: pointer;
    vertical-align: -3px;
    border: 1px solid #959595;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 50%;

    &:checked {
        background-color: $base-primary;
        border: 1px solid $base-primary;

        &:before {
            top: 3px;
            left: 3px;
            width: 7.5px;
            height: 5px;
            content: '';
            color: #ffffff;
            position: absolute;
            border-bottom: solid 2px currentColor;
            border-left: solid 2px currentColor;
            -webkit-transform: rotate(-48deg);
            transform: rotate(-48deg);
        }
    }

    &:disabled {
        cursor: not-allowed;
        border-color: #ccc;
        background-color: #f7f7f7;

        &:checked {
            border-color: #eeeeee;
            background-color: #eeeeee;
        }
    }
}

//切换样式
.toggle-switch {
    position: relative;

    input[type=checkbox] {
        position: relative;
        left: 0;
        top: 0;
        width: 32px;
        height: 0px;
        border: none !important;
        clip: rect(0, 0, 0, 0);

        &::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 32px;
            height: 20px;
            margin-top: -7px;
            content: "";
            border-radius: 100px;
            border: 2px solid $toggle-switch-border;
        }

        &::after {
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            margin-top: -7px;
            content: "";
            border-radius: 100px;
            border: 2px solid $toggle-switch-border;
            background-color: $toggle-switch-bg;
        }

        &:checked::before {
            background-color: $toggle-switch-color-default;
            border-color: $toggle-switch-color-default;
            transform: none !important;
            -webkit-transform: none !important;
            -moz-transform: none !important;
        }

        &:checked::after {
            left: 11px;
            border-color: $toggle-switch-color-default;
        }
    }

    @mixin toggle-switch-styles($main-color) {
        input[type=checkbox] {

            &::before {
                border-color: $main-color;
            }

            &::after {
                border-color: $main-color;
            }

            &:checked::before {
                border-color: $main-color;
                background-color: $main-color;
            }

            &:checked::after {
                left: 11px;
                border-color: $main-color;
            }
        }
    }

    &.toggle-primary {
        @include toggle-switch-styles($toggle-switch-color-primary);
    }

    &.toggle-success {
        @include toggle-switch-styles($toggle-switch-color-success);
    }

    &.toggle-info {
        @include toggle-switch-styles($toggle-switch-color-info);
    }

    &.toggle-warning {
        @include toggle-switch-styles($toggle-switch-color-warning);
    }

    &.toggle-danger {
        @include toggle-switch-styles($toggle-switch-color-danger);
    }
}

//switch-radio切换选项
.switch-radio-group {
    .switch-radio {
        position: relative;
        float: left;

        input[type=radio] {
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            clip: rect(0, 0, 0, 0);
        }

        .switch-radio-title {
            user-select: none;
            cursor: pointer;
            display: inline-block;
            border: 1px solid $switch-group-title-border;
            margin-left: -1px;
            padding: 4px 8px;
            font-size: 12px;
            margin-top: 2px;
            background-color: $switch-group-title-bg;
        }

        input[type=radio]:checked~.switch-radio-title {
            background-color: $switch-group-checked-bg;
            border-color: $switch-group-checked-border;
            color: $switch-group-checked-color;

            &.success {
                background-color: $switch-radio-success-bg;
                border-color: $switch-radio-success-border;
            }

            &.info {
                background-color: $switch-radio-info-bg;
                border-color: $switch-radio-info-border;
            }

            &.warning {
                background-color: $switch-radio-warning-bg;
                border-color: $switch-radio-warning-border;
            }

            &.danger {
                background-color: $switch-radio-danger-bg;
                border-color: $switch-radio-danger-border;
            }
        }
    }

    .switch-radio:first-child .switch-radio-title {
        border-radius: 4px 0 0 4px;
    }

    .switch-radio:last-child .switch-radio-title {
        border-width: 1px;
        border-radius: 0 4px 4px 0;
    }

    @mixin switch-radio-styles($bdcolor, $bgcolor) {
        .switch-radio {
            input[type=radio]:checked~.switch-radio-title {
                background-color: $bgcolor;
                border-color: $bdcolor;
                color: $switch-group-checked-color;
            }
        }
    }

    &.switch-radio-primary {
        @include switch-radio-styles($switch-radio-primary-border, $switch-radio-primary-bg);
    }

    &.switch-radio-success {
        @include switch-radio-styles($switch-radio-success-border, $switch-radio-success-bg);
    }

    &.switch-radio-info {
        @include switch-radio-styles($switch-radio-info-border, $switch-radio-info-bg);
    }

    &.switch-radio-warning {
        @include switch-radio-styles($switch-radio-warning-border, $switch-radio-warning-bg);
    }

    &.switch-radio-danger {
        @include switch-radio-styles($switch-radio-danger-border, $switch-radio-danger-bg);
    }


}

input.error,
textarea.error {
    border-color: $input-error-border;
}

.control-label.is-required:before {
    content: '* ';
    color: $required-fonts-color;
}

.form-header {
    font-size: 14px;
    color: $form-header-color !important;
    border-bottom: 1px solid $form-header-border;
    margin: 8px 0 20px 0;
    padding-bottom: 5px;
}

.form-header-block {
    color: $form-header-color;
    font-size: 14px;
    padding: 0 10px;
    line-height: 15px;
    position: relative;
    margin-bottom: 10px;

    &::before {
        content: "";
        position: absolute;
        top: 1px;
        left: 0;
        width: 4px;
        height: 13px;
        background-color: $form-header-color;
    }
}


label {
    &.error {
        color: $form-label-error-color;
        position: absolute;
        right: 18px;
        top: 8px;
        font-size: 12px;
        z-index: 99;
    }

    &.radio-error.error,
    &.checkbox-error.error {
        position: relative;
        color: $form-label-error-color;
        font-size: 12px;
        left: 0;
        top: 2px;
        display: inline;
        margin: 0;
    }
}

/* laydate重置样式 */

.layui-laydate.laydate-theme-reset {
    .layui-this {
        background-color: $laydate-main-color !important;
    }

    .layui-laydate-header i:hover,
    .layui-laydate-header span:hover {
        color: $laydate-main-color !important;
    }

    .layui-laydate-footer span:hover {
        color: $laydate-main-color !important;
    }
}


/* layer重置样式 */
.layer-reset[type="dialog"] {
    min-width: 320px;
}

.layer-reset-msg[type="dialog"] {
    min-width: 200px;
}

.layer-reset,
.layui-layer-prompt {
    .layui-layer-title {
        background: $layer-titile-bg;
        color: $layer-titile-color;
        font-size: $layer-titile-font-size;
        height: 42px;
        line-height: 42px;
        border: 0;

        span.layui-layer-tabnow {
            height: 47px
        }
    }

    .layui-layer-content .layui-layer-ico {
        top: 19.5px;
    }

    .layui-layer-padding {
        padding-top: 24px;
    }

    .layui-layer-btn {
        text-align: right;
        padding: 10px 15px 12px;
        background: $layer-btn-box-bg;
        border-top: 1px $layer-btn-box-border solid;

        a {
            font-size: 12px;
            font-weight: normal;
            margin: 0 3px;
            margin-right: 7px;
            margin-left: 7px;
            padding: 0 15px;
            color: $layer-btn-default-color;
            border: 1px solid $layer-btn-default-bdcolor;
            background: $layer-btn-default-bgcolor;
            border-radius: 3px;
            display: inline-block;
            height: 30px;
            line-height: 30px;
            text-align: center;
            vertical-align: middle;
            background-repeat: no-repeat;
            text-decoration: none;
            outline: 0;
            @include box-sizing(content-box);
        }

        .layui-layer-btn0 {
            color: $white-color;
            background: $layer-btn-default-bgcolor;
        }

        .layui-layer-btn1 {
            background: $layer-btn-first-bgcolor;
            color: $layer-btn-first-color;
            border: 1px solid $layer-btn-first-bdcolor;
            border-radius: 4px;
        }

        .layui-layer-btn2 {
            background: $layer-btn-second-bgcolor;
            color: $layer-btn-second-color;
            border: 1px solid $layer-btn-second-bdcolor;
            border-radius: 4px;
        }

        .layui-layer-btn3 {
            background: $layer-btn-third-bgcolor;
            color: $layer-btn-third-color;
            border: 1px solid $layer-btn-third-bdcolor;
            border-radius: 4px;
        }
    }

    .layui-layer-input {
        outline: none;
    }
}

.layui-layer-content ul {
    padding: 0;
    margin: 0;
}

.layui-layer-flex {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding-left: 25px !important;

    .layer-msg-icon {
        font-size: 28px;
        margin-right: 5px;
    }
}



@-webkit-keyframes layui-slide-r {
    0% {
        opacity: 1;
        @include translate(100%, 0);

    }

    100% {
        opacity: 1;
        @include translate(0, 0);
    }
}

@keyframes layui-slide-r {
    0% {
        opacity: 1;
        @include translate(100%, 0);
    }

    100% {
        opacity: 1;
        @include translate(0, 0);
    }
}

.layui-slide-right {
    @include animation(layui-slide-r .6s ease-out);
}


@-webkit-keyframes layui-slide-l {
    0% {
        opacity: 1;
        @include translate(-100%, 0);
    }

    100% {
        opacity: 1;
        @include translate(0, 0);
    }
}

@keyframes layui-slide-l {
    0% {
        opacity: 1;
        @include translate(-100%, 0);

    }

    100% {
        opacity: 1;
        @include translate(0, 0);

    }
}

.layui-slide-left {
    @include animation(layui-slide-l .6s ease-out);
}


/* 加载框 */
.loaderbox {
    display: inline-block;
    min-width: 125px;
    padding: 10px;
    margin: 0 auto;
    color: $loaderbox-color !important;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    border: 1px solid $loaderbox-border;
    background-color: $loaderbox-bgcolor;
    border-radius: 4px;
    @include box-shadow(0 1px 8px rgba(0, 0, 0, 0.1));

    .loading-activity {
        float: left;
        width: 18px;
        height: 18px;
        border: solid 2px transparent;
        border-top-color: $loaderbox-color;
        border-left-color: $loaderbox-color;
        border-radius: 10px;
        @include animation(pace-spinner 400ms linear infinite);
    }
}


@media(max-width: 767px) {
    .loading-activity {
        width: 18px;
        height: 18px
    }
}

@-ms-keyframes pace-spinner {
    0% {
        @include rotate(0deg);
    }

    100% {
        @include rotate(360deg);
    }
}

@keyframes pace-spinner {
    0% {
        @include rotate(0deg);
    }

    100% {
        @include rotate(360deg);
    }
}

.icon-select-box {
    display: none;
    width: 100%;
    border: 1px solid #e5e6e7;
    margin-top: 2px;
    border-radius: 3px;
    height: 180px;
    overflow-y: auto;
    text-align: center;
}

.icon-select-list {
    .fa {
        margin: 5px;
        padding: 5px;
        cursor: pointer;
        font-size: 18px;
        width: 28px;
        border-radius: 3px;
    }

    .fa:hover {
        background-color: $base-primary;
        color: #ffffff;
    }
}

div.tagsinput span.tag {
    background-color: $base-primary;
}

/* 个人资料页面样式 */
.profile-avatar-box {
    width: 120px;
    height: 120px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;

    .profile-avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .profile-avatar-link {
        display: none;
        width: 100%;
        height: 100%;
        position: absolute;
        border-radius: 50%;
        top: 0;
        left: 0;
        background-color: rgba($color: #000000, $alpha: 0.2);
        text-align: center;
        color: #ddd;
        line-height: 130px;

    }

    &:hover {
        .profile-avatar-link {
            display: block;
        }
    }
}

/* cropper头像裁剪窗口样式 */
.cropper-area {
    margin: 5px;
    width: 114px;
    height: 94px;
    background: #f3f3f3;
}

.cropper-area img {
    width: 114px;
    height: 94px;
}

.cropper-image-box {
    width: 400px;
    height: 240px;
    background: #e3e2e2;
}

.cropper-image-box img {
    width: 300px;
    height: 200px;
}

.cropper-image-tools {
    margin-top: 10px
}

.cropper-image-file {
    width: 1px;
    height: 1px;
}

.cropper-preview-box {
    width: 160px;
    height: 100px;
    overflow: hidden;
    background: #e3e2e2;
}

/* 下拉树select-tree插件颜色重写样式 */

.select-tree-container.open .select-panel {
    border: 1px solid $form-input-focus-bdcolor;
    border-radius: 4px 4px 0 0;
}



.select-tree-container .tree-panel {
    border: 1px solid $form-input-focus-bdcolor;
    border-top: none;
}


.select-tree-container .tree-panel ul li .tree-option.selected::after {
    color: $base-primary;
}

.select-panel .select-value .select-item {
    background-color: $base-primary;
}

.select-tree-container .tree-panel ul li .tree-option.selected {
    background: mix($base-primary, $white-color, 5%);
}

.select-tree-container .tree-panel ul li .tree-option:hover {
    background: #f3f3f3;
}

/* 自定义卡片容器 */
.card {
    border-radius: $base-border-radius;
    margin-bottom: 9px;

    &:after {
        content: " ";
        display: table;
        clear: both;
    }
}

.tree-select-box {
    .tree-tools-bar {
        padding: 8px;
        overflow: hidden;

        a {
            display: inline-block;
            color: #676a6c;
            margin-right: 8px;

            &:hover {
                color: #333;
            }
        }
    }

    .tree-select-body {
        padding: 0 10px;
        border: 1px solid #eee;
        overflow: auto;
        max-height: 400px;
    }
}

.file-uploader {
    .webuploader-pick {
        color: $white-color;
        background: $base-primary;

    }

    .webuploader-pick-hover {
        opacity: 0.8;
    }
}